<template>
  <div class="bj">
    <!--         问候语-->

    <!--  表单登录-->
    <body id="poster">
    <el-form class="register-container" label-position="left" label-width="0px">
      <div id="app">
        <timer/>
      </div>
      <h3 class="register_title">欢迎注册使用携不程✈️</h3>
      <el-form-item>
        <el-input type="text" v-model="registerForm.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input type="password" v-model="registerForm.password" auto-complete="off"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <div class="yzm">

        <el-form-item>
          <el-input class="ma" v-model="registerForm.code" placeholder="验证码" style="width: 150px"></el-input>
          <el-button class="anniu" type="primary" @click="getCode()">{{ totime }}</el-button>
        </el-form-item>

      </div>

      <el-form-item style="width: 100%">
        <el-button type="primary" round style="width: 100%;border: none" v-on:click="register()">注册
        </el-button>
      </el-form-item>
    </el-form>
    </body>
  </div>
</template>
<script>
import userAction from "../api/userAction";
import timer from "../components/Timer";

export default {
  components: {
    timer
  },
  name: "register",
  data() {
    return {
      timer: null,//定时器
      time: 61,
      grt: 'hello',
      ho: new Date().getHours(),
      registerForm: {
        phone: '',
        password: '',
        code: ''
      },
      responseResult: []
    }
  },
  computed: {
    totime() {
      return this.time == 61 ? '请获取验证码' : this.time + '秒后可重新发送'
    }
  },
  methods: {
    getCode() {
      this.getTX_SMS()
      //  倒计时测试
      this.timer = setInterval(this.toCode, 1000);
    },
    toCode() {
      this.time--
      if (this.time == 0) {
        clearInterval(this.timer)
        this.timer = null
        this.time = 61
      }

    },
    register() {
      userAction.userRegister(this.registerForm)
        .then(result => {
          if (result.data.message === "注册成功") {
            this.$router.push('/login')
            this.$message({
              message: '注册完成，转至登录页',
              type: 'success'
            });
          }

        })
    },
    getTX_SMS() {
      userAction.TX_SMS(this.registerForm.phone)
        .then(response => {
        })
    }
  }
}
</script>

<style scoped>
.yzm {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#poster {
  background: url("../../static/f1.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.register-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 150px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  opacity: 0.9;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.register_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}


</style>
